<div th:fragment="page">
    <ul class="pagination pagination-sm no-margin pull-right">
        <li><a class="first">首页</a></li>
        <li><a class="pre">上一页</a></li>
        <li><a class="next">下一页</a></li>
        <li><a class="last">尾页</a></li>
        <li><a class="rowCount">总记录数(0)</a></li>
        <li><a class="pageCount">总页数(0)</a></li>
        <li><a class="pageCurrent">当前页(1)</a></li>
    </ul>
    <script type="text/javascript">
        /*定义初始化分页数据的方法*/
        function doSetPagination(pageObject) {
            $(".rowCount").html(`总记录数(${pageObject.rowCount})`);
            $(".pageCount").html(`总页数(${pageObject.pageCount})`);
            $(".pageCurrent").html(`当前页(${pageObject.pageCurrent})`);
            // 存储如上数据(页码值和总页数) 后续备用
            // data为jquery中的存取数据函数 data(key[, value])
            $("#pageId").data("pageCurrent", pageObject.pageCurrent);
            $("#pageId").data("pageCount", pageObject.pageCount);

        }

        $(function () {
            // 在pageId元素上注册click事件
            $("#pageId").on("click", ".first, .pre, .next, .last", doJumpToPage);
        })

        // 基于新的页码值重新加载数据
        function doJumpToPage() {
            // 基于页码值修改当前页码值
            let pageCurrent = $("#pageId").data("pageCurrent");
            let pageCount = $("#pageId").data("pageCount");
            // 修改当前页码值
            let cls = $(this).prop("class");  // 获取被点击属性的class属性值
            if (cls == "first") {
                pageCurrent = 1;
            } else if (cls == "pre" && pageCurrent > 1) {
                pageCurrent--;
            } else if (cls == "next" && pageCurrent < pageCount) {
                pageCurrent++;
            } else if (cls == "last") {
                pageCurrent = pageCount;
            } else {
                return;
            }
            // 重新存储数据
            $("#pageId").data("pageCurrent", pageCurrent);
            // 基于新的页码值重新执行查询  -- 调用页面中的doGetObject方法
            doGetObjects();
        }



    </script>
</div>







